<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <ul v-for="item in items">
            <li>{{ item.message }}</li>
        </ul>

        <ul v-for="item in NumList">
            <li>{{item}}</li>
        </ul>

        <!-- vm.items[1] = 'x' // 不是响应性的
            vm.items.length = 2 // 不是响应性的 -->

        <!-- 响应式的方法 -->

        <!-- // Vue.set
                Vue.set(vm.items, indexOfItem, newValue) -->

        <!-- vm.$set(vm.items, indexOfItem, newValue) -->

        <!-- // Array.prototype.splice
                vm.items.splice(indexOfItem, 1, newValue) -->
        
                <!-- 设置长度 -->
        <!-- vm.items.splice(newLength) -->
    </div>

    <!--  数组尝试调用变异方法。
        比如 vm.items.push({ message: 'Baz' }) -->

    <!-- 
        vm.items = vm.items.filter(function (item) {
            return item.message.match(/No/)
        })
     -->
    <script src="vue.js"></script>
</body>
</html>